<template>
	<view class="container">
		<view class="command-filter-icon" @click="openDrawer">
			<img :src="filterPhoto" style="width: 132rpx; height: 52rpx" />
		</view>
		<!-- <view class="command-filter-title">筛选</view> -->
		<uni-drawer ref="showRight" mode="right" :width="drawerWidth" @change="changeDrawer">
			<view class="close-drawer-btn" @click="closeDrawer">
				<img src="./../../../static/common/arrowRight.png" />
			</view>
			<view class="drawer-content">
				<view class="drawer-content-title"> 全部筛选</view>
				<scroll-view class="filter-container-detail" scroll-y="true" show-scrollbar="true">
					<view class="fliter-content">
						<view class="show-title">节日主题</view>
						<checkbox-group class="section-box" @change="changeHolidayTheme">
							<view class="item-list" v-for="item in showFilterInfo.holidayTheme" :key="item.value">
								<checkbox
									v-if="item.value !== '展开' && item.value !== '收起'"
									:value="item.value"
									:checked="item.isChecked"
									iconColor="#FF6C01"
								>
									{{ item.value }}
								</checkbox>
								<!-- 展开、收起 -->
								<view class="item-list" v-else @click="expandAndRetract">
									<img class="logo-info" :src="showIcon" />
									{{ btnText }}
								</view>
							</view>
						</checkbox-group>
					</view>
					<view class="fliter-content">
						<view class="show-title">风格类型</view>
						<checkbox-group class="section-box" @change="changeStyleType">
							<view class="item-list" v-for="item in showFilterInfo.styleType" :key="item.value">
								<checkbox :value="item.value" :checked="item.isChecked" iconColor="#FF6C01" />{{
									item.value
								}}
							</view>
						</checkbox-group>
					</view>
					<view class="fliter-content">
						<view class="show-title">颜色体系</view>
						<view class="color-section-box">
							<view
								:class="item.isChecked ? 'active-color-item' : ''"
								class="color-item-list"
								v-for="item in showFilterInfo.colorSystem"
								:style="{ background: `#${item.value}` }"
								:key="item.key"
								@click="selectedColor(item)"
							/>
						</view>
					</view>
					<view class="fliter-content">
						<view class="show-title">性别</view>
						<checkbox-group class="section-box" @change="changeGenderList">
							<view class="item-list" v-for="item in showFilterInfo.genderList" :key="item.value">
								<checkbox :value="item.value" :checked="item.isChecked" iconColor="#FF6C01" />{{
									item.value
								}}
							</view>
						</checkbox-group>
					</view>
					<view class="fliter-content" :style="{ 'padding-bottom': !isWxBrowser ? '200rpx' : '0' }">
						<view class="show-title">面料尺寸</view>
						<checkbox-group class="section-box" @change="changeFabricSize">
							<view class="item-list" v-for="item in showFilterInfo.fabricSize" :key="item.value">
								<checkbox :value="item.value" :checked="item.isChecked" iconColor="#FF6C01" />{{
									item.value
								}}
							</view>
						</checkbox-group>
					</view>
				</scroll-view>
				<view class="drawer-content-btn">
					<view class="btn" @click="resetFilterData">重置 </view>
					<view class="btn change-page-btn2" @click="getFilterData"> 确认</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script setup>
	import { ref, toRaw, watch, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import showIndexApi from '../../../sheep/api/showIndex.js';
	import _ from 'lodash';
	import sheep from '@/sheep';

	const emit = defineEmits(['changeDrawer', 'getFilterData']);

	const isWxBrowser = computed(() => sheep.$store('app').isWxBrowser); //代码运行环境
	const filterPhoto = computed(() =>
		filterStatus.value
			? './../../../static/common/filterActived.png'
			: './../../../static/common/filterInactive.png',
	);

	const showRight = ref(null);
	const btnText = ref('展开');
	const showIcon = ref('./../../../static/common/down.png');
	const filterStatus = ref(false);

	const showFilterInfo = ref({
		holidayTheme: [],
		styleType: [],
		colorSystem: [],
		genderList: [],
		fabricSize: [],
	});
	//判断是否手动选择了筛选条件，且 颜色体系 不需要该判断
	const holidayThemeFlag = ref(false); //节日主题
	const styleTypeFlag = ref(false); //风格类型
	const genderListFlag = ref(false); //性别
	const fabricSizeFlag = ref(false); //面料尺寸
	const drawerWidth = ref(267); //抽屉宽度

	//已筛选的数据
	const filterData = ref({
		holidayTheme: [],
		styleType: [],
		colorSystem: '',
		genderList: [],
		fabricSize: [],
	});

	const openDrawer = () => {
		showRight.value.open();
	};
	const changeDrawer = (val) => {
		emit('changeDrawer', val);
	};
	const closeDrawer = () => {
		showRight.value.close();
	};
	const list = ref([]);
	const tempDataList = ref([]);
	const btnItemOpen = ref({
		value: '展开',
		isChecked: false,
	});
	const btnItemClose = ref({
		value: '收起',
		isChecked: false,
	});
	//展开或者收起改变的是数据, 不再需要改变盒子高度
	const expandAndRetract = () => {
		if (btnText.value === '展开') {
			showFilterInfo.value.holidayTheme = _.concat(
				showFilterInfo.value.holidayTheme,
				tempDataList.value,
			).filter((item) => {
				return item.value !== '展开';
			});
			btnText.value = '收起';
			showIcon.value = './../../../static/common/up.png';
			showFilterInfo.value.holidayTheme.push(btnItemClose.value);
		} else {
			btnText.value = '展开';
			showIcon.value = './../../../static/common/down.png';
			showFilterInfo.value.holidayTheme = showFilterInfo.value.holidayTheme.slice(0, 7); //节日主题
			showFilterInfo.value.holidayTheme.push(btnItemOpen.value);
		}
	};
	const removeArrayElements = (list1, list2) => {
		const newlist = ref([]);
		return toRaw(newlist.value);
	};
	//节日主题
	const changeHolidayTheme = (data) => {
		filterData.holidayTheme = data.detail.value;
		holidayThemeFlag.value = true;
		isRestFilterDataFlag.value = false;
		filterStatus.value = data.detail.value.length > 0 ? true : false;
		if (data.detail.value.length == 0) {
			clearSelected(showFilterInfo.value.holidayTheme);
		}

		//解决页面已勾选，但未同步更新列表数据的问题
		dealWithCurrentList(showFilterInfo.value.holidayTheme, filterData.holidayTheme);
	};
	//风格类型
	const changeStyleType = (data) => {
		filterData.styleType = data.detail.value;
		styleTypeFlag.value = true;
		isRestFilterDataFlag.value = false;
		filterStatus.value = data.detail.value.length > 0 ? true : false;
		if (data.detail.value.length == 0) {
			clearSelected(showFilterInfo.value.styleType);
		}

		//解决页面已勾选，但未同步更新列表数据的问题
		dealWithCurrentList(showFilterInfo.value.styleType, filterData.styleType);
	};
	//颜色体系
	const selectedColor = (item) => {
		item.isChecked = !item.isChecked;
		filterData.colorSystem = getDefaultFilterData(showFilterInfo.value.colorSystem);
		isRestFilterDataFlag.value = false;
		filterStatus.value = filterData.colorSystem.length > 0 ? true : false;
	};
	// 性别
	const changeGenderList = (data) => {
		filterData.genderList = data.detail.value;
		genderListFlag.value = true;
		isRestFilterDataFlag.value = false;
		filterStatus.value = data.detail.value.length > 0 ? true : false;
		if (data.detail.value.length == 0) {
			clearSelected(showFilterInfo.value.genderList);
		}

		//解决页面已勾选，但未同步更新列表数据的问题
		dealWithCurrentList(showFilterInfo.value.genderList, filterData.genderList);
	};
	// 面料尺寸
	const changeFabricSize = (data) => {
		filterData.fabricSize = data.detail.value;
		fabricSizeFlag.value = true;
		isRestFilterDataFlag.value = false;
		filterStatus.value = data.detail.value.length > 0 ? true : false;
		if (data.detail.value.length == 0) {
			clearSelected(showFilterInfo.value.fabricSize);
		}

		//解决页面已勾选，但未同步更新列表数据的问题
		dealWithCurrentList(showFilterInfo.value.fabricSize, filterData.fabricSize);
	};
	//根据已选择的数据同步原始数据中的isChecked字段
	const dealWithCurrentList = (list1, list2) => {
		list1.forEach((item) => {
			item.isChecked = list2.includes(item.value);
		});
	};
	//获取筛选列表中的默认值
	const getDefaultFilterData = (list) => {
		const newlist = ref([]);
		list = list.filter((item) => {
			return item.isChecked;
		});
		list.forEach((item) => {
			newlist.value.push(item.value);
		});
		return toRaw(newlist.value);
	};
	//是否重置了筛选列表
	const isRestFilterDataFlag = ref(false);
	//确定事件
	const getFilterData = () => {
		closeDrawer();
		if (isRestFilterDataFlag.value) {
			//重置-清空列表中所有已选择的数据
			filterData.holidayTheme = [];
			filterData.styleType = [];
			filterData.colorSystem = [];
			filterData.genderList = [];
			filterData.fabricSize = [];
			filterStatus.value = false;
		}
		emit('getFilterData', filterData);
	};
	// 清空已选中
	const clearSelected = (list) => {
		list.forEach((item) => {
			item.isChecked = false;
		});
	};
	//重置
	const resetFilterData = () => {
		isRestFilterDataFlag.value = true;
		clearSelected(showFilterInfo.value.holidayTheme); //清空节日主题
		clearSelected(showFilterInfo.value.styleType); //清空风格类型
		clearSelected(showFilterInfo.value.colorSystem); //清空颜色体系
		clearSelected(showFilterInfo.value.genderList); //清空性别
		clearSelected(showFilterInfo.value.fabricSize); //清空面料尺寸
	};

	const dealWitDataList = (list) => {
		return (list = list.map((item) => {
			return {
				value: item,
				isChecked: false,
			};
		}));
	};
	const dealWitdColorList = (list) => {
		return (list = list.map((item) => {
			return {
				...item,
				isChecked: false,
			};
		}));
	};

	onLoad((options) => {
		let data = {
			festivals: [],
			genders: [],
			hues: [],
			publicNewSelection: false,
			special: false,
			styles: [],
		};
		/**
		 * 获取筛选区数据
		 */
		showIndexApi.getFilterInfo(data).then((res) => {
			showFilterInfo.value.holidayTheme = dealWitDataList(res.data.festivals).slice(0, 7); //节日主题
			let len = res.data.festivals.length;
			tempDataList.value = dealWitDataList(res.data.festivals).slice(7, len);
			showFilterInfo.value.holidayTheme.push(btnItemOpen.value);

			showFilterInfo.value.styleType = dealWitDataList(res.data.styles); //风格类型
			showFilterInfo.value.colorSystem = dealWitdColorList(res.data.hues); //颜色体系
			showFilterInfo.value.genderList = dealWitDataList(res.data.genders); //性别
			showFilterInfo.value.fabricSize = dealWitDataList(res.data.printTypes); //面料尺寸
		});
	});
</script>

<style scoped lang="scss">
	.container {
		width: 132rpx;
		height: 52rpx;
		// background: #ffffff;
		border-radius: 200rpx 0px 0px 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.command-filter-icon {
			// width: 38rpx;
			// height: 52rpx;
			text-align: center;
			img {
				padding-top: 14rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}

		.command-filter-title {
			width: 84rpx;
			height: 52rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #111111;
			display: flex;
			align-items: center;
		}
		.filterBtn-active {
			background-color: #ff6c01;
		}

		.drawer-content {
			padding: 0 20rpx;

			.drawer-content-title {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}

			.filter-container-detail {
				height: calc(100vh - 200rpx);
				overflow-y: scroll;
				// padding-bottom: 100rpx;
				.fliter-content {
					margin-top: 32rpx;
					.show-title {
						height: 70rpx;
						border-bottom: 1px solid rgba(0, 0, 0, 0.1);
						box-sizing: border-box;
					}

					.color-section-box {
						display: flex;
						justify-content: flex-start;
						flex-wrap: wrap;
						padding-top: 10rpx;

						.active-color-item {
							border: 3rpx solid #111111;
							box-sizing: border-box;
						}

						.color-item-list {
							width: 40rpx;
							height: 40rpx;
							margin: 8rpx;
						}
					}

					.section-box {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						.item-list {
							width: 226rpx;
							height: 56rpx;
							display: flex;
							margin-top: 18rpx;
							align-items: center;
							justify-content: flex-start;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							font-style: normal;

							img {
								width: 24rpx;
								margin-left: 12rpx;
								padding-right: 18rpx;
							}
						}
					}
				}
				.compatible {
					padding-bottom: 300rpx;
				}

				.fliter-content:first-of-type {
					margin-top: 0;
				}
			}

			.drawer-content-btn {
				width: 100%;
				height: 100rpx;
				position: fixed;
				bottom: 0rpx;
				left: 0;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #eef0f2;

				.btn {
					width: 218rpx;
					height: 60rpx;
					border-radius: 50rpx;
					border: 2rpx solid #111111;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					text-align: center;
					line-height: 60rpx;
					color: #111111;
					font-style: normal;
				}

				.change-page-btn2 {
					color: #eef0f2;
					background: #111111;
				}
			}
		}
	}

	::v-deep.uni-drawer--right {
		background: #eef0f2;
		border-radius: 16rpx 0px 0px 16rpx;
	}

	.close-drawer-btn {
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		left: -5.14%;
		top: 50%;
		img {
			width: 52rpx;
			height: 52rpx;
			margin-left: -20rpx;
		}
	}
</style>
